<template>
  <div class="product-container">
    <div class="product-gallery">
      <img
        :src="product.mainImage"
        alt="商品主图"
        class="main-image"
        @click="openLightbox"
      >
      <div class="thumbnail-gallery">
        <img
          v-for="thumbnail in product.thumbnails"
          :key="thumbnail"
          :src="thumbnail"
          alt="缩略图"
          class="thumbnail"
          @click="changeMainImage(thumbnail)"
        >
      </div>
    </div>

    <div class="product-details">
      <h1>{{ product.name }}</h1>
      <p class="price">价格: ¥ {{ product.price }}</p>
      <p class="description">{{ product.description }}</p>
      <button class="buy-button" @click="buyProduct">立即购买</button>
    </div>

    <div class="product-tabs">
      <ul>
        <li @click="activeTab = 'details'" :class="{ active: activeTab === 'details' }">商品详情</li>
        <li @click="activeTab = 'reviews'" :class="{ active: activeTab === 'reviews' }">商品评论</li>
        <li @click="activeTab = 'recommendations'" :class="{ active: activeTab === 'recommendations' }">商品推荐</li>
      </ul>

      <div v-show="activeTab === 'details'" class="tab-content">
        <p class="product-feature">{{ product.details }}</p>
        <ul>
          <li v-for="feature in product.features" :key="feature">{{ feature }}</li>
        </ul>
      </div>

      <div v-show="activeTab === 'reviews'" class="tab-content">
        <ul>
          <li v-for="review in product.reviews" :key="review.id">
            <p>{{ review.text }}</p>
            <span>{{ review.date }}</span>
          </li>
        </ul>
      </div>

      <div v-show="activeTab === 'recommendations'" class="tab-content">
        <ul>
          <li v-for="recommendation in recommendedProducts" :key="recommendation.id">
            <img :src="recommendation.image" alt="推荐商品">
            <p>{{ recommendation.name }}</p>
            <span>价格: ¥ {{ recommendation.price }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {
        name: '商品名称',
        price: 99.99,
        description: '这是一款优质的商品，具有出色的性能和设计。',
        details: '商品详细描述，包括材质、尺寸、功能等信息。',
        features: ['特性1', '特性2', '特性3'],
        mainImage: 'https://via.placeholder.com/800x600/FF7F50/FFFFFF?text=主图',
        thumbnails: [
          'https://via.placeholder.com/100x100/FF7F50/FFFFFF?text=缩略图1',
          'https://via.placeholder.com/100x100/FF7F50/FFFFFF?text=缩略图2',
          'https://via.placeholder.com/100x100/FF7F50/FFFFFF?text=缩略图3'
        ],
        reviews: [
          { id: 1, text: '评论1', date: '2023-05-01' },
          { id: 2, text: '评论2', date: '2023-05-02' },
          { id: 3, text: '评论3', date: '2023-05-03' }
        ]
      },
      recommendedProducts: [
        { id: 1, name: '推荐商品1', price: 49.99, image: 'https://via.placeholder.com/100x100/FF7F50/FFFFFF?text=推荐1' },
        { id: 2, name: '推荐商品2', price: 59.99, image: 'https://via.placeholder.com/100x100/FF7F50/FFFFFF?text=推荐2' },
        { id: 3, name: '推荐商品3', price: 69.99, image: 'https://via.placeholder.com/100x100/FF7F50/FFFFFF?text=推荐3' }
      ],
      activeTab: 'details'
    };
  },
  methods: {
    changeMainImage(image) {
      this.product.mainImage = image;
    },
    buyProduct() {
      alert('购买商品');
    },
    openLightbox() {
      // 实现图片灯箱效果的逻辑
    }
  }
};
</script>

<style scoped>
.product-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-gallery {
  position: relative;
  margin-bottom: 20px;
}

.main-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  cursor: pointer;
}

.thumbnail-gallery {
  display: flex;
  justify-content: center;
  gap: 10px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.7);
  padding: 5px;
  border-radius: 5px;
}

.thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.thumbnail:hover {
  transform: scale(1.1);
}

.product-details {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
}

.product-details h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

.price {
  font-size: 18px;
  color: #FF7F50;
  margin-bottom: 10px;
}

.description {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.buy-button {
  background-color: #FF7F50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.buy-button:hover {
  background-color: #ff6633;
}

.product-tabs {
  margin-top: 20px;
}

.product-tabs ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-tabs li {
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.product-tabs li:hover {
  border-color: #FF7F50;
}

.product-tabs li.active {
  border-color: #FF7F50;
}

.tab-content {
  margin-top: 20px;
}

.product-feature {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}
</style>